<template>
  <div class="page">
    <div class="warn-box">
      <svg-icon style="margin-right: 17px" icon-class="warn" :size="20" />
      <p>
        找不到想要的商品品类? 可点击联系<a href="#" style="color: #2892ff">官方客服</a>添加品类！
      </p>
    </div>
    <div class="mt15">
      <h3 class="h3">已申请品类</h3>
      <div class="beenOpenList">
        <ul>
          <li v-for="(item, index) in applyList" :key="index" class="cate_li">
            {{ item.name }}
          </li>
        </ul>
      </div>
    </div>
    <div class="mt15">
      <h3 class="h3">未申请品类</h3>
      <div class="noneOpenList" v-for="item in notApplyList" :key="item.id">
        <div class="checkTitle">
          <span class="noneCate">{{item.name}}</span>
          <el-checkbox
            border
            size="mini"
            v-if="item.children.length >0"
            v-model="item.parCheck"
            @change="checkedAll(item)"
            >选中全部</el-checkbox>
        </div>
        <el-checkbox-group
          size="mini"
          class="checkboxGroup"
          v-model="item.checkList"
          @change="allSelect"
        >
          <el-checkbox
            border
            class="itemcheckbox"
            v-for="notItem in item.children"
            :key="notItem.id"
            :label="notItem.id"
            @change="checkedItem(item)"
            >{{ notItem.name }}</el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <div class="bottomBtn">
      <el-button @click="returnList()">返回</el-button>
      <el-button type="primary" @click="submitForm()">点击申请</el-button>
    </div>
  </div>
</template>

<script>
import { getCategoryInfo, addCategory } from "@/api/category"
export default {
  data() {
    return {
      applyList: [],
      notApplyList: [],
      checkAll: {
        parCheck: false,
        text: '全选'
      },
      checkedApply: [],
    };
  },
  methods: {
    getList(){
      getCategoryInfo().then(res =>{
        this.applyList = res.applyCategory
        let notData = res.notApplyCategory
        notData.forEach(item =>{
          this.$set(item,'parCheck',false)
          this.$set(item,'checkList',[])
        })
        this.notApplyList = notData
      })
    },
    checkedAll(val) {
      let ids= []
      if (val.parCheck){
        val.children.forEach(item2 => {
          ids.push(item2.id)
        } )
        val.checkList = ids
      }else{
        val.checkList = []
      }
    },
    allSelect(value) {
      let checkedCount = value.length;
      this.checkAll.parCheck = checkedCount === this.notApplyList.length;
    },
    checkedItem(item){
      item.parCheck = false
      if(item.checkList.length === item.children.length){
        item.parCheck = true
      }
    },
    returnList(){
      this.$router.go(-1)
    },
    submitForm(){
      // console.log('notApplyList',this.notApplyList)
      let newStr = '', newList = []
      this.notApplyList.forEach(item =>{
        if(item.checkList.length > 0){
          item.checkList.forEach(item1 =>{
            newList.push(item1)
          })
        }
        newStr = newList.join(',') 
      })
      if(!newStr){
        this.$message.warning('请选择品类')
        return false
      }
      addCategory({
        categoryIdStr: newStr
      }).then(res =>{
        this.$router.push({name: 'goodsCategory'})
        this.getList()
      })
    }
  },
  mounted() {
    this.getList()
  },
};
</script>

<style lang="scss" scoped>
.mt15 {
  margin-top: 15px;
}
.page{
  position: relative;
}
.h3 {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  line-height: 40px;
}
.beenOpenList {
  background: #f5f5f5;
  padding: 20px 0;
  ul {
    margin: 0;
  }
  .cate_li {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    background: #f3f6fb;
    padding: 0 10px;
    border: 1px solid #2892ff;
    border-radius: 3px;
    margin-right: 15px;
    text-align: center;
    font-size: 14px;
    color: #2892ff;
    cursor: pointer;
  }
}
.noneOpenList{
  .checkTitle{
    height: 50px;
    line-height: 50px;
  }
  .noneCate{
    margin-right: 20px;
  }
  .checkboxGroup{
    background: #f3f6fb;
    padding: 10px 15px;
    .itemcheckbox{
      margin-right: 10px;
      color: #666666; 
    }
  }
}
.bottomBtn{
  height: 60px;
  line-height: 70px;
  background: #FFFFFF;
  box-shadow: 0px -1px 0px 0px #EEEEEE;
  text-align: center;
  margin-top: 50px;
}
</style>
